<template>
  <div>
    {{loading}}
    <br />
    clientHeight:{{getHeight}}
    <br />
    resize:{{clientHeight}}
    <br />
    <button @click="nowComputedStr = now">按钮computed</button>缓存-----------computed:{{nowComputedStr}}
    <br />
    <button @click="nowEventStr = nowEvent()">按钮event</button>每次计算-----------event:{{nowEventStr}}
    <br />
    {{obj.a+'----'+obj.b}}
    <br />
    <button @click="setObj()">检测对象属性的添加或删除</button>
  </div>
</template>
<script>
import dict from "_c/dict/dict.vue";
import _ from "lodash";
export default {
  // 接收参数
  props: ["kindCode"],
  // props: {
  //   kindCode: {
  //     type: Number,
  //     required: true
  //   }
  // }
  // 组件引入
  components: {
    dict
  },
  // 数据对象 提前声明
  data() {
    return {
      loading: false,
      isQuery: false,
      nowComputedStr: null,
      nowEventStr: null,
      clientHeight: `${document.documentElement.clientHeight}px`,
      firstName: null,
      lastName: null,
      obj: { a: 1 }
    };
  },
  beforeCreate() {
    console.log("beforeCreate  is: " + this.loading);
  },
  //  created 钩子可以用来在一个实例被创建之后执行代码
  created() {
    this.queryList = _.debounce(this.nowEvent, 500);
    console.log("created  is: " + this.loading);
  },
  beforeMount() {
    console.log("beforeMount  is: " + this.loading);
  },
  // 安装
  mounted() {
    let self = this;
    // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
    window.onresize = () => {
      self.clientHeight = `${document.documentElement.clientHeight}px`;
    };
    console.log("mounted is: " + this.loading);
    self.$set(self.obj, "b", 2);
    // self.obj = { ...self.obj, b: 2, c: 2 };
    // self.obj = Object.assign(self.obj, { b: 2, c: 2 });
    self.init();
  },
  // 计算属性
  computed: {
    getHeight() {
      return document.documentElement.clientHeight;
    },
    now() {
      console.log("computed");
      return new Date().getTime();
    },
    fullName: {
      get() {
        return this.firstName + " " + this.lastName;
      },
      set(newVal) {
        let name = newVal.split(" ");
        this.firstName = name[0];
        this.lastName = name[1];
      }
    }
  },
  watch: {
    // clientHeight(newVal) {
    //   this.queryList();
    // },
    // immediate 立即执行 的执行顺序在created 之前，加上后的执行顺序在created 创建的queryList 调用不到
    clientHeight: {
      handler: function(newVal) {
        console.log("11111---" + newVal);
        this.queryList();
      },
      // immediate: true,
      deep: true
    }
  },
  methods: {
    // 初始化
    init() {
      let self = this;
    },
    nowEvent() {
      let data = new Date().getTime();
      console.log("event" + data);
      return data;
    },
    setObj() {
      this.obj.a = Math.random();
      this.obj.b = Math.random();
    }
  }
};
</script>

<style scoped>
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -100px;
}
</style>
